<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>在线HTML</title>
	</head>
	<body>
		<style>
			html{
				height: 100%; padding: 0; margin: 0;
			}
			body{
				height: 100%;
				padding: 0;
				margin: 0;
				/* h5页面禁止复制以及禁止右键 */
				-webkit-touch-callout:none;  /*系统默认菜单被禁用*/
				-webkit-user-select:none; /*webkit浏览器*/
				-khtml-user-select:none; /*早期浏览器*/
				-moz-user-select:none; /*火狐*/
				-ms-user-select:none;  /*IE10*/
				user-select:none;
			}
			.content{
				display: flex;
				flex-direction: column;
				height: calc(100% - 45px);
				padding: 0;
				margin: 0;
			}
			textarea{
				padding: 10px;
				resize: none;
				width: calc( 100% - 20px ); 
				margin: 0;
				border: 0;
			}
			textarea:focus{
				/* 文本域 获取焦点后的样式 */
				/* outline: none; */
			}
			iframe{
				margin: 0; border: 0;
				height: 50%; border-top: 1px solid red;
			}
			.content #edit{
				height: 50%; display: flex;
    			flex-direction: initial;
			}
			.content #editHtml{
				border-right: 1px solid red;
			}
			.controls{
				border-top   : 1px solid #808080;
				border-bottom: 1px solid #808080;
				padding: 10px; white-space: nowrap;
				overflow-x: auto; min-height: 23px;
 			}
			.controls a, .controls label{
				text-decoration: none; user-select: none;
				padding: 8px; cursor: pointer;
			}
			.controls a:hover, .controls label:hover{
				background: #f0f0f0;
			}
			.body_bk_black,.body_bk_black #editHtml,.body_bk_black #editCss{
				background:#000;
				color:#fff;
			}
			.body_bk_white,.body_bk_white #editHtml,.body_bk_white #editCss {
				background:#fff;
				color:#000 ;
			}
		</style>
		<div class="controls">
			<label> <input type=checkbox id="runTime" onclick="onClickRunTime()" checked> 实时运行</label> | 
			<label onclick="saveHtml()">  保存</label> | 
			<label onClick="openWindow(false)">到打开的窗口</label> |
			<label onClick="openWindow(true)" >打开新窗口</label> |
			<label onclick="updateBack('black')">  黑色背景</label> | 
			<label onclick="updateBack('white')">  白色背景</label> | 
		</div>
		<div class="content">
			<div id="edit">
				<textarea id="editHtml">		
<!-- html内容  -->
<span class="runspan">
	实时运行实时编译.
</span>
				</textarea>
				<textarea id="editCss">
/*css样式*/
body {
	padding: 22px !important;
}
.runspan {
	display: inline-block;
	background: #00ffff;
	padding: 20px;
}
				</textarea>
			</div>
			<iframe name="runContent" style="width: 100%; height: 100%"></iframe>
			<script>
				/* 背景切换 */
				updateBack=(type)=>{
					if(type == "black") {
						document.getElementsByTagName("body")[0].className = "body_bk_black";
						document.getElementById("edit").className = "body_bk_black";//editHtml
					}else if(type == 'white') {
						document.getElementsByTagName("body")[0].className = "body_bk_white"
						document.getElementById("edit").className = "body_bk_white";//editHtml
					}
				}
				/* 运行编译 */
				onClickRunTime=()=>{
					let runIframe = window.runContent.document;
					runIframe.open();
					runIframe.write(finalHtml());
					//禁用iframe右键
					disableUse(runIframe);
					runIframe.close();
				};
				/* 指定对象禁止使用右键和全选 */
				disableUse=(obj)=>{
					obj.oncontextmenu=new Function("event.returnValue=false");
					obj.onselectstart=new Function("event.returnValue=false");
				}
				/* 打开新窗口 */
				openWindow=(newWin)=>{
					let win=null;
					if (newWin) win= window.open()
					else win= window.open("about:blank","newOldWin",'location=no');
					win.focus();
					let runIframe = win.document;
					runIframe.open();
					runIframe.write(finalHtml());
					runIframe.title="new在线HTML";

					runIframe.close();
				}
				/* 最终的html内容 */
				finalHtml=()=>{
					let stylecss = "<style>"+document.getElementById("editCss").value+"</style>";
					let edithtml = "<html><head>"+stylecss+"</head><body>"+document.getElementById("editHtml").value+"</body></html>";
					return edithtml;
				}
				/* 即时编译 */
				realtime=()=>{
					if (!document.querySelector("#runTime").checked) return;
					onClickRunTime();
				}
				/* 保存最终html */
				saveHtml=(downloadName = "在线后最终HTML内容")=>{
					let urlObject = window.URL || window.webkitURL || window;
					let export_blob = new Blob([finalHtml()],{type: 'text/html'});
					let save_link = document.createElement("a");			
					save_link.href = urlObject.createObjectURL(export_blob);
					save_link.download = downloadName;//下载后的名称 
					 triggerEvent(save_link, "click");
				}
				/* 给定的对象上面，模拟事件 */
				triggerEvent=(obj, type="click")=>{
					let ev = document.createEvent("MouseEvents");
					ev.initMouseEvent( type, true, false, window, 0, 0, 0, 0, 0 , false, false, false, false, 0, null );
					obj.dispatchEvent(ev);
				}
				/* 初始化 */
				init=()=>{
					document.getElementById("editHtml").onkeyup=realtime;
					document.getElementById("editCss").onkeyup=realtime;
					onClickRunTime();
				}
				init();
			</script>
		</div>
	</body>
</html>
